<template>
  <el-dialog
    title="订单详情"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="75%">
    <el-row :gutter="20" style="margin-bottom: 10px">
      <el-col :span="6"><div>订单编号:<el-input :disabled="true" v-model="orderInfo.orderId" placeholder="请输入内容" style="width:150px;margin-left: 5px; display: inline-block"></el-input></div></el-col>
      <el-col :span="6"><div>收&nbsp;&nbsp;件&nbsp;人:<el-input v-model="orderInfo.buyerName" placeholder="请输入内容" style="width:150px;margin-left: 5px; display: inline-block"></el-input></div></el-col>
      <el-col :span="6"><div>手&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机:<el-input v-model="orderInfo.buyerPhone" placeholder="请输入内容" style="width:150px;margin-left: 5px; display: inline-block"></el-input></div></el-col>
      <el-col :span="6"><div>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:<el-input v-model="orderInfo.buyerAddress" placeholder="请输入内容" style="width:150px;margin-left: 5px; display: inline-block"></el-input></div></el-col>
    </el-row>
    <el-row :gutter="20" style="margin-bottom: 10px">
      <el-col :span="6"><div>订单金额:<el-input v-model="orderInfo.orderAmount" placeholder="请输入内容" style="width:150px;margin-left: 5px; display: inline-block"></el-input></div></el-col>
      <el-col :span="6">
        <div>订单状态:
          <el-tag type="info" style="margin-left: 5px;margin-top: 5px" v-if="orderInfo.orderStatus==0&&orderInfo.payStatus==0">等待买家付款</el-tag>
          <el-tag type="success" style="margin-left: 5px;margin-top: 5px" v-if="orderInfo.orderStatus==0&&orderInfo.payStatus==1">等待卖家发货</el-tag>
          <el-tag type="success" style="margin-left: 5px;margin-top: 5px" v-if="orderInfo.orderStatus==1&&orderInfo.payStatus==1">等待买家收货</el-tag>
          <el-tag type="success" style="margin-left: 5px;margin-top: 5px" v-if="orderInfo.orderStatus==4&&orderInfo.payStatus==1">等待拼团</el-tag>
          <el-tag type="success" style="margin-left: 5px;margin-top: 5px" v-if="orderInfo.orderStatus==2">已完成</el-tag>
          <el-tag type="success" style="margin-left: 5px;margin-top: 5px" v-if="orderInfo.orderStatus==5">拼团完成</el-tag>
          <el-tag type="danger" style="margin-left: 5px;margin-top: 5px" v-if="orderInfo.orderStatus==3">已取消</el-tag>
        </div>
      </el-col>
      <!--<el-col :span="6"><div>合同:<img style="margin-left: 5px;width: 40px;height: 40px" :src="orderInfo.contract"></img></div></el-col>-->
      <el-col :span="6"><div>快递公司:<el-select  style="margin-left: 5px;width: 150px" v-model="orderInfo.deliveryCode" placeholder="请选择">
        <el-option
          v-for="item in  deliveryOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select></div></el-col>
      <el-col :span="6"><div>快递单号:<el-input v-model="orderInfo.trackingNumber" placeholder="请输入内容" style="width:150px;margin-left: 5px; display: inline-block"></el-input></div></el-col>
      <el-col :span="6"></el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <!--<el-col :span="6"><div>合同:<img style="margin-left: 5px;width: 40px;height: 40px" :src="orderInfo.contract"></img></div></el-col>-->
    <el-row :gutter="20" style="margin-bottom: 10px">
      <el-col :span="8"><div>交易流水号:{{orderInfo.payTradeNo}}</div></el-col>
      <el-col :span="8"><div>退款流水号:{{orderInfo.refundTradeNo}}</div></el-col>
    </el-row>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      style="width: 100%;">
      <el-table-column
        prop="productIcon"
        header-align="center"
        align="center"
        width="80"
        label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.productIcon" width="60" height="60"></img>
        </template>
      </el-table-column>
      <el-table-column
        prop="detailId"
        header-align="center"
        align="center"
        width="80"
        label="ID">
      </el-table-column>
      <el-table-column
        prop="productId"
        header-align="center"
        align="center"
        width="80"
        label="产品ID">
      </el-table-column>
      <el-table-column
        prop="productName"
        header-align="center"
        align="center"
        label="产品名称">
      </el-table-column>
      <el-table-column
        prop="productModel"
        header-align="center"
        align="center"
        label="产品型号">
      </el-table-column>
      <el-table-column
        prop="productSpec"
        header-align="center"
        align="center"
        label="产品规格">
        <template slot-scope="scope">
          {{specValueParse(scope.row.productSpec)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="productPrice"
        header-align="center"
        align="center"
        label="产品价格">
      </el-table-column>
      <el-table-column
        prop="productQuantity"
        header-align="center"
        align="center"
        label="数量">
      </el-table-column>
      <el-table-column
        prop="createDate"
        header-align="center"
        align="center"
        label="创建日期">
      </el-table-column>
    </el-table>

    <div style="text-align: right; margin-top: 5px">
      <el-button style="width: 80px;" @click="updateHandle()">更新</el-button>
      <el-button type="success" style="width: 80px;" @click="shippingHandle()" v-if="orderInfo.payStatus == 1 && (orderInfo.orderStatus == 0 || orderInfo.orderStatus == 4 || orderInfo.orderStatus == 5)">发货</el-button>
      <el-button type="primary" style="width: 120px;" @click="gatheringHandle()" v-if="orderInfo.payStatus == 0">收款并完成</el-button>
      <el-button type="danger" style="width: 80px;" @click="refundHandle(orderInfo.orderId)" v-if="orderInfo.payStatus == 1 && !orderInfo.refundTradeNo">退款</el-button>
    </div>

  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          id: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        specGroupOptions: [],
        deliveryOptions: [],
        orderInfo: {
          orderId: '',
          deliveryCode: '',
          buyerName: '',
          buyerPhone: '',
          buyerAddress: '',
          orderAmount: '',
          orderStatus: 0,
          trackingNumber: '',
          contract: '',
          payStatus: 0
        }
      }
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/sys/specification/list`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.specGroupOptions = data.specificationList
                console.log(data.specificationList)
              }
            }).then(() => {
              this.$http({
                url: this.$http.adornUrl(`/sys/deliveryCorp/list`),
                method: 'get',
                params: this.$http.adornParams()
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.deliveryOptions = data.deliveryCorpVOList
                }
              })
            }).then(() => {
              this.$http({
                url: this.$http.adornUrl(`/sys/order/info/${id}`),
                method: 'get',
                params: this.$http.adornParams()
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.orderInfo = data.order
                  console.log(this.orderInfo)
                }
              })
            }).then(() => {
              this.$http({
                url: this.$http.adornUrl(`/sys/order/detail/${id}`),
                method: 'get',
                params: this.$http.adornParams()
              }).then(({data}) => {
                if (data && data.code === 0) {
                  this.dataList = data.orderDetailList
                }
              })
            })
          }
        })
      },
      updateHandle: function () {
        this.$http({
          url: this.$http.adornUrl(`/sys/order/update`),
          method: 'post',
          data: this.orderInfo
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          }
        })
      },
      shippingHandle: function () {
        this.$http({
          url: this.$http.adornUrl(`/sys/order/shipping`),
          method: 'post',
          data: this.orderInfo
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          }
        })
      },
      gatheringHandle: function () {
        this.$http({
          url: this.$http.adornUrl(`/sys/order/gathering`),
          method: 'post',
          data: this.orderInfo
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          }
        })
      },
      refundHandle: function (orderId) {
        this.$confirm(`确定对[订单编号=${orderId}]进行[退款]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/sys/order/refund`),
            method: 'post',
            data: {orderId: orderId}
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }).catch(() => {
        })
      },
      specValueParse: function (specValue) {
        if (!specValue || specValue.length === 0) {
          return ''
        }
        let arr = specValue.split(',')
        let rtn = ''
        for (let obj of arr) {
          for (var option of this.specGroupOptions) {
            if (option && option.id && option.id.toString() === obj) {
              if (rtn !== '') {
                rtn = rtn + ','
              }
              rtn = rtn + option.name
              break
            }
          }
        }
        return rtn
      },
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/sys/scheduleLog/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'jobId': this.dataForm.id
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      }
    }
  }
</script>
